<template>
    <view-box>

        <div class="background-top-pos">
            <img :src='images' alt="">
        </div>

        <div class="bottom-clo-cl">
            <flexbox orient="vertical" :gutter="0">
                <flexbox-item  v-for="(item, index) in items" :key="index">
                    <div class="flex-demo tjian-cl">
                        <div class="work-job-lj">
                            <p style="color: #ff0000;font-weight: 600;"><img :src="item.img" alt=""></p>
                        </div>
                        <div class="work-job-cl" >
                            <p class="job-pol-col">{{item.company}}</p>
                            <p class="job-pol-col">互联网/移动互联网/电子商务      100-200人</p>
                            <p style="color: #666666">
                                <span class="fivesocial">五险一金</span>
                                <span class="fivesocial">绩效奖金</span>
                            </p>
                            <p>1个JAVA工程师相关职业</p>
                        </div>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>

        <s-Search ></s-Search>
        <b-menu></b-menu>
    </view-box>
</template>
<script>
import bMenu from '../components/bottom_menu'
import { ViewBox, Box, Search, Flexbox, FlexboxItem, Divider } from 'vux'

export default {
  components: {
    ViewBox,
    Box,
    bMenu,
    Flexbox,
    FlexboxItem,
    Divider,
    Search
  },
  data () {
    return {
      images: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1836611714,1036444481&fm=200&gp=0.jpg',
      items: [
        {
          assets: '贵阳',
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1725218175,74281058&fm=27&gp=0.jpg',
          job: 'JAVA开发工程师',
          company: '北京神州太岳软件股份有限公司(2年)',
          members: 1,
          schools: '本科',
          money: '7千-8千',
          years: 1,
          workexp: 3
        },
        {
          assets: '贵阳',
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1725218175,74281058&fm=27&gp=0.jpg',
          job: 'JAVA开发工程师',
          company: '北京神州太岳软件股份有限公司(2年)',
          members: 1,
          schools: '大专',
          money: '7千-8千',
          years: 2,
          workexp: 3
        },
        {
          assets: '贵阳',
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1725218175,74281058&fm=27&gp=0.jpg',
          job: 'JAVA开发工程师',
          company: '北京神州太岳软件股份有限公司(2年)',
          members: 0,
          schools: '本科',
          money: '7千-8千',
          years: 1,
          workexp: 3
        }
      ]
    }
  }
}
</script>
<style scoped>
    .background-top-pos{
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        height: 5.4rem;
        position: relative;

    }
    .background-top-pos img{
        width: 100%;
        height: 100%;
    }
    .fivesocial{
        width: .951388rem;
        height: .27777rem;
        background: #f3f3f3;
        padding: .05rem;
    }
    .lucency a{
        color: #000;
    }
    .flex-dh-cl img{
        width: 40% !important;
    }
    .flex-dh-cl p{
        font-size: .1008rem;
        font-weight: 600;
    }
    .bottom-clo-cl{
    }
    .tjian-cl{
        background: #fff;
        display: flex;
        width: 100%;
        margin-top: 0.4rem;

    }
    .work-job-lj {
        width: 10%;
    }
    .work-job-lj p{
        font-size: .1008rem;

    }
    .work-job-lj p img{
        width: 100%;
    }
    .work-job-cl{
        width: 80%;
        padding-left: 2.8%;
    }
    .job-pol-col{
        font-weight: 600;
    }
    .work-job-cl p{
        text-align: left;
        font-size: .1008rem;
        line-height: 0.5rem;
    }
    .fivesocial{
    }
</style>